<template>
  <div>
    <BasicTable @register="registerRolesList">
      <template #tableTitle>
        <a-button @click="handleCreateRole" type="primary"> 新增 </a-button>
      </template>
      <template #emptyText>
        <div>暂无数据</div>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '编辑',
                disabled: [1].includes(record.roleId),
                onClick: handleEdit.bind(null, record),
              },
              {
                label: '删除',
                disabled: [1].includes(record.roleId),
                popConfirm: {
                  title: '是否确认删除',
                  placement: 'left',
                  confirm: handleDelete.bind(null, record),
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <EditModal @register="registerRolesModal" @success="handleRolesSuccess" />
  </div>
</template>

<script lang="ts" name="Roles">
  import { defineComponent, onMounted } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import { roleColumns, getRoleTypeList } from './roles.data';
  import EditModal from './EditModal.vue';
  // import { randomUUID } from '/@/views/form-design/utils/index';

  export default defineComponent({
    name: 'BasicInfo',
    components: { BasicTable, EditModal, TableAction },
    setup() {
      // 操作定义
      const [
        registerRolesList,
        { setTableData: setRolesTableData, getDataSource: getRolesDataSource },
      ] = useTable({
        dataSource: [],
        columns: roleColumns,
        pagination: false,
        scroll: { y: 700 },
        emptyDataIsShowTable: false,
        actionColumn: {
          width: 200,
          title: '操作',
          dataIndex: 'action',
          fixed: 'right',
        },
      });
      const [registerRolesModal, { openModal: openRolesModal }] = useModal();
      function handleCreateRole() {
        openRolesModal(true, {
          isEdit: false,
        });
      }
      function handleRolesSuccess(data, isEdit) {
        const tableList = getRolesDataSource();
        if (isEdit) {
          const index = tableList.findIndex((item) => item.roleId === data.roleId);
          tableList.splice(index, 1, { ...data });
          setRolesTableData(tableList);
        } else {
          data.roleId = tableList.length + 1;
          const arr = [...tableList, { ...data }];
          setRolesTableData(arr);
        }
      }
      function handleEdit(record: Recordable) {
        openRolesModal(true, {
          ...record,
          isEdit: true,
        });
      }
      async function handleDelete(record: Recordable) {
        const tableList = getRolesDataSource();
        const index = tableList.findIndex((item) => item.roleId === record.roleId);
        tableList.splice(index, 1);
      }
      onMounted(() => {
        getRoleTypeList();
      });
      return {
        registerRolesList,
        handleCreateRole,
        registerRolesModal,
        handleRolesSuccess,
        setRolesTableData,
        getRolesDataSource,
        handleEdit,
        handleDelete,
      };
    },
  });
</script>
<style lang="less" scoped>
  :deep(.ant-table-body) {
    padding-top: 0 !important;
  }
</style>
